<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>09_表单数据的自动收集</title>
</head>

<body>
    <div id="demo">
        <form action="/xxx" @submit.prevent="handleSubmit">
            <span>用户名:</span>
            <input type="text" v-model="username" placeholder="请输入用户名"><br>

            <span>密码:</span>
            <input type="password" v-model="pwd" placeholder="请输入密码"><br>

            <span>性别:</span>
            <label for="male">男</label>
            <input type="radio" v-model="sex" id="male" value="male">
            <label for="female">女</label>
            <input type="radio" v-model="sex" id="female" value="female"><br>

            <span>爱好:</span>
            <label for="foot">足球</label>
            <input type="checkbox" v-model="sports" id="foot" value="foot">
            <label for="basketball">篮球</label>
            <input type="checkbox" v-model="sports" id="basketball" value="basketball">
            <label for="swim">游泳</label>
            <input type="checkbox" v-model="sports" id="swim" value="swim"><br>

            <span>城市:</span>
            <select v-model="citySelect">
                <option value="">请选择</option>
<!--  这种报错  <option value="{{city.id}}" v-for="(city,index) in citys" :key="index">{{city.name}}</option>-->
                <option :value="city.id" v-for="(city,index) in citys" :key="index">{{city.name}}</option>
            </select><br>

            <span>简介:</span>
            <textarea id="" cols="30" rows="10" v-model="intro"></textarea><br>

            <button type="submit">提交</button>
        </form>
    </div>
</body>
<script type="text/javascript" src="../vue.js"></script>
<script>
    const vm = new Vue({
        el: '#demo',
        data: {
            username: '',
            pwd: '',
            sex: 'female',
            sports: ['swim'],
            citys: [{
                id: 1,
                name: 'beijing'
            }, {
                id: 2,
                name: 'guangzhou'
            }, {
                id: 3,
                name: 'shenzheng'
            }],
            citySelect: '',
            intro: ''
        },
        methods: {
            //handleSubmit(event){
            //event.preventDefault()
            //}
            handleSubmit() {
                alert(this.username + '-' + this.pwd + '-' + this.sex + '-' + this.sports + '-' + this.citySelect + '-' + this.intro)
            }
        }
    })
</script>

</html>